<!doctype html>
<html>
<head>
    <title>PHP版P2P播放器</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    <meta http-equiv="content-language" content="zh-CN"/>
    <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta name="referrer" content="never"/>
    <meta name="renderer" content="webkit"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="x5-page-mode" content="app"/>
    <meta name="Viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/p2p-dplayer@latest"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/p2p-dplayer@latest/dist/DPlayer.min.css">
    <style type="text/css">
        body,html{width:100%;height:100%;background:#000;padding:0;margin:0;overflow-x:hidden;overflow-y:hidden}
        *{margin:0;border:0;padding:0;text-decoration:none}
        #stats{z-index: 1000; position:fixed;top:5px;left:8px;font-size:12px;color:#fdfdfd;text-shadow:1px 1px 1px #000, 1px 1px 1px #000}
        #player{width: 100%;height: 100%;background-color:#000;position:inherit}
    </style>
</head>
<body>
<div id="player"></div>
<div id="stats"></div>
<script>
    var m3u8url="https://pp.605ziyuan.com/20181031/2jXXsCp0/index.m3u8";
    var webdata = {
        set:function(key,val){
            window.sessionStorage.setItem(key,val);
        },
        get:function(key){
            return window.sessionStorage.getItem(key);
        },
        del:function(key){
            window.sessionStorage.removeItem(key);
        },
        clear:function(key){
            window.sessionStorage.clear();
        }};
    var dp = new DPlayer({
        container: document.getElementById('player'),
        autoplay: true,
        video: {
            url: m3u8url,
            type: 'hls'
        },hlsjsConfig: {
            maxBufferSize:10*1000*1000,
//debug: false,
            p2pConfig: {
                logLevel: true,
                live: false
            }}});
    dp.seek(webdata.get('pay'+m3u8url));
    setInterval(function(){webdata.set('pay'+m3u8url,dp.video.currentTime);},1000);
    var _peerId = '', _peerNum = 0, _totalP2PDownloaded = 0, _totalP2PUploaded = 0;
    dp.on('stats', function (stats) {
        _totalP2PDownloaded = stats.totalP2PDownloaded;
        _totalP2PUploaded = stats.totalP2PUploaded;
        updateStats();
    });
    dp.on('peerId', function (peerId) {
        _peerId = peerId;
    });
    dp.on('peers', function (peers) {
        _peerNum = peers.length;
        updateStats();
    });
    function updateStats() {
        var text = 'P2P正在为您加速' + (_totalP2PDownloaded/1024).toFixed(2)+ 'MB 已分享' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' 连接节点' + _peerNum + '个';
        document.getElementById('stats').innerText = text;
    }
</script>
</body>
</html>